<template>
  <view class="page-container">
    <!-- 顶部导航栏（顶级渐变+质感） -->
    <view class="top-nav">
      <view class="nav-title">泉州生活资讯</view>
      <view class="nav-divider"></view>
    </view>

    <!-- 泉州天气模块（高级卡片+统一风格） -->
    <view class="weather-container">
      <view class="weather-header">
        <text class="weather-title">泉州今日天气预报</text>
        <text class="weather-subtitle">精准气象 · 贴心出行</text>
      </view>

      <!-- 加载状态（匹配整体动效） -->
      <view v-if="isLoading" class="loading">
        <text class="loading-text">气象数据加载中...</text>
        <view class="loading-spinner"></view>
      </view>

      <!-- 错误状态（高级重试按钮） -->
      <view v-else-if="weatherError" class="error">
        <text class="error-icon">⚠️</text>
        <text class="error-text">天气数据获取失败</text>
        <button @click="getWeather" class="retry-btn">重新加载</button>
      </view>

      <!-- 天气数据展示（极致排版） -->
      <view v-else class="weather-info">
        <view class="weather-main">
          <view class="weather-icon">{{ getWeatherIcon(weatherData.type) }}</view>
          <view class="weather-temp">
            <text class="temp-max">{{ weatherData.maxTemp }}℃</text>
            <text class="temp-divider">/</text>
            <text class="temp-min">{{ weatherData.minTemp }}℃</text>
          </view>
        </view>
        <view class="weather-detail">
          <view class="detail-item">
            <text class="detail-label">日期</text>
            <text class="detail-value">{{ weatherData.date }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">星期</text>
            <text class="detail-value">{{ weatherData.week }}</text>
          </view>
          <view class="detail-item">
            <text class="detail-label">天气</text>
            <text class="detail-value">{{ weatherData.type }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 新闻列表模块（顶级质感） -->
    <view class="news-section">
      <view class="news-list">
        <view class="news-item" v-for="(item, index) in dataList" :key="index">
          <!-- 新闻卡片（高级纹理+悬浮动效） -->
          <view class="news-card" :class="{ 'news-card--top': item.isTop }">
            <view class="card-texture"></view>
            
            <!-- 标题区域 -->
            <view class="title-container">
              <view class="top-tag" v-if="item.isTop">
                <text class="tag-icon">📌</text>
                置顶
              </view>
              <view class="news-card__title" @click="goDetail(item.title)">
                {{ item.title }}
              </view>
            </view>
            
            <!-- 新闻元信息 -->
            <view class="news-card__meta">
              <view class="meta__left">
                <view class="meta__author" @click="showAuthor(item.author)">
                  <text class="meta-icon">👤</text>
                  {{ item.author }}
                </view>
                <view class="meta__separator"></view>
                <view class="meta__comments">
                  <text class="meta-icon">💬</text>
                  {{ formatComments(item.comments) }}
                </view>
              </view>
              <view class="meta__time">
                <text class="meta-icon">⏱️</text>
                {{ item.time }}
              </view>
            </view>
            
            <!-- 搜索插槽 -->
            <view v-if="item.showSearch" class="search-slot">
              <text class="search-slot__label">相关搜索：</text>
              <view class="search-slot__tags">
                <view class="search-tag" @click="handleSearch('今日金价')">
                  <text class="tag-icon--small">🔍</text>
                  今日金价
                </view>
                <view class="search-tag" @click="handleSearch('精选好物')">
                  <text class="tag-icon--small">🔍</text>
                  精选好物
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部装饰 -->
    <view class="page-footer"></view>
  </view>
</template>

<script>
export default {
  name: "QuanZhouNews",
  data() {
    return {
      // 泉州天气相关（城市编码：101230501）
      weatherData: {},
      isLoading: false,
      weatherError: false,
      // 新闻数据（极致版）
      dataList: [
        {
          title: "乘势而上，续写中国奇迹新篇章—党的二十届四中全会侧记",
          isTop: true,
          author: "新华社",
          comments: 56,
          time: "2025.10.25"
        },
        {
          title: "黄金还能走多远?卖方高呼“第三浪启动”，230多份研报看多",
          isTop: false,
          author: "财联社",
          comments: "452",
          time: "2025.10.08",
          showSearch: true
        },
        {
          title: "14个月从0家开到100家门店，蜜雪冰城如何做到",
          isTop: false,
          author: "央视新闻",
          comments: 102,
          time: "2025.10.20"
        },
        {
          title: "视频画报｜携手开创亚太发展新时代",
          isTop: false,
          author: "新华社",
          comments: "91.1万",
          time: "2025.10.29"
        },
        {
          title: "年轻人关心的这些事，“十五五”规划建议都提到了",
          isTop: false,
          author: "人民日报客户端",
          comments: "223万",
          time: "2025.10.29"
        },
        {
          title: "【理响中国】解码中华文明 | 从未停更的大地史书——中华文明具有突出的连续性",
          isTop: false,
          author: "中国人民网",
          comments: "110万",
          time: "2025.10.29"
        },
        {
          title: "喜欢您来！福建美味“不基础”",
          isTop: false,
          author: "福州日报",
          comments: 9999,
          time: "2025.10.29"
        },
        {
          title: "“双节”假期福建礼物市集人气旺 市民游客赶集看好戏",
          isTop: false,
          author: "东南网",
          comments: "135万",
          time: "2025.10.29"
        },
        {
          title: "福建隐藏的“吃货天堂”，弓鱼术竟成为鱼鲜秘诀？",
          isTop: false,
          author: "福州日报",
          comments: "520万",
          time: "2025.10.29"
        }
      ],
      // 天气图标映射（极致体验）
      weatherIconMap: {
        晴: "☀️",
        多云: "⛅",
        阴: "☁️",
        雨: "🌧️",
        小雨: "🌦️",
        中雨: "🌧️",
        大雨: "⛈️",
        暴雨: "🌩️",
        雷阵雨: "⛈️",
        雪: "❄️",
        小雪: "🌨️",
        中雪: "❄️",
        大雪: "🌨️",
        雾: "🌫️",
        霾: "😷"
      }
    };
  },
  // 页面加载优先级优化
  onLoad() {
    // 清除旧缓存（关键修复：避免之前的明日数据残留）
    uni.removeStorageSync("quanzhou_weather_cache");
    // 预加载今日天气（使用新缓存Key）
    this.getWeatherWithCache();
  },
  // 页面显示时刷新状态
  onShow() {
    if (!this.weatherData.date || this.isDateExpired()) {
      this.getWeather();
    }
  },
  methods: {
    // 校验天气日期是否为当前自然日（关键修复）
    isDateExpired() {
      if (!this.weatherData.date) return true;
      const today = new Date().toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit"
      }).replace(/\//g, "-");
      return this.weatherData.date !== today;
    },

    // ========== 天气核心功能（极致健壮） ==========
    // 带缓存的天气获取（更换新缓存Key，关键修复）
    getWeatherWithCache() {
      const cacheKey = "quanzhou_weather_today_cache"; // 新缓存Key，彻底隔离旧数据
      const cacheData = uni.getStorageSync(cacheKey);
      const now = Date.now();

      // 缓存有效期1小时，且日期必须是今日
      if (cacheData && cacheData.expire > now && !this.isDateExpired()) {
        this.weatherData = cacheData.data;
        return;
      }

      // 无缓存/缓存过期/日期不匹配，请求新数据
      this.getWeather();
    },

    // 获取泉州今日天气（核心修复：日期精准匹配）
    getWeather() {
      this.isLoading = true;
      this.weatherError = false;
      const weatherUrl = "http://t.weather.sojson.com/api/weather/city/101230501";
      const todayFormat = new Date().toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit"
      }).replace(/\//g, "-"); // 格式化今日日期（如：2025-10-30）

      uni.request({
        url: weatherUrl,
        method: "GET",
        timeout: 15000,
        retryCount: 0,
        retryLimit: 1,
        success: (res) => {
          this.isLoading = false;
          // 严格数据校验（包含日期匹配）
          if (
            !res.data || 
            res.data.status !== 200 || 
            !res.data.data || 
            !res.data.data.forecast || 
            res.data.data.forecast.length < 1
          ) {
            this.weatherError = true;
            uni.showToast({ title: "气象数据格式异常", icon: "none", duration: 2000 });
            return;
          }

          // 精准匹配今日天气（关键修复：遍历forecast找当前日期，避免索引偏差）
          const todayWeather = res.data.data.forecast.find(item => {
            // 接口日期格式统一为 ymd（如：2025-10-30），与本地格式对比
            return item.ymd === todayFormat;
          });

          if (!todayWeather) {
            // 若未找到，取第一个并提示（兼容接口特殊返回）
            this.weatherData = {
              date: res.data.data.forecast[0].ymd,
              week: res.data.data.forecast[0].week.replace("星期", "周"),
              maxTemp: res.data.data.forecast[0].high.replace(/[^\d]/g, ""),
              minTemp: res.data.data.forecast[0].low.replace(/[^\d]/g, ""),
              type: res.data.data.forecast[0].type
            };
            uni.showToast({ title: "当前时段数据更新中，显示最新可用天气", icon: "none", duration: 2000 });
          } else {
            // 正常匹配今日数据
            this.weatherData = {
              date: todayWeather.ymd,
              week: todayWeather.week.replace("星期", "周"),
              maxTemp: todayWeather.high.replace(/[^\d]/g, ""),
              minTemp: todayWeather.low.replace(/[^\d]/g, ""),
              type: todayWeather.type
            };
          }

          // 缓存今日数据（新缓存Key）
          uni.setStorageSync("quanzhou_weather_today_cache", {
            data: this.weatherData,
            expire: Date.now() + 3600000 // 1小时有效期
          });
        },
        fail: (err) => {
          this.isLoading = false;
          // 超时重试逻辑
          if (err.errMsg.includes("timeout") && this.retryCount < this.retryLimit) {
            this.retryCount++;
            this.getWeather();
            return;
          }

          this.weatherError = true;
          console.error("泉州天气请求失败：", err);
          uni.showToast({ title: "网络异常，获取天气失败", icon: "none", duration: 2000 });
        }
      });
    },

    // 天气图标匹配（极致体验）
    getWeatherIcon(type) {
      return this.weatherIconMap[type] || "🌡️";
    },

    // ========== 新闻交互功能（极致体验） ==========
    // 新闻标题点击（高级动画）
    goDetail(title) {
      const animation = uni.createAnimation({
        duration: 300,
        timingFunction: "ease-out"
      });
      animation.opacity(1).translateY(-20).step();

      uni.showToast({
        title: `查看详情：${title.substring(0, 15)}...`,
        icon: "none",
        duration: 1500,
        animation: true
      });

      // 可扩展：跳转详情页
      // uni.navigateTo({
      //   url: `/pages/newsDetail/newsDetail?title=${encodeURIComponent(title)}`
      // });
    },

    // 作者信息弹窗（极致交互）
    showAuthor(author) {
      uni.showModal({
        title: "来源信息",
        content: `作者/来源：${author}`,
        confirmText: "查看更多",
        cancelText: "关闭",
        confirmColor: "#4361ee",
        cancelColor: "#718096",
        animationType: "slide-in-bottom",
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: `加载${author}更多内容中`,
              icon: "loading",
              duration: 1000
            });
          }
        }
      });
    },

    // 搜索标签点击（反馈优化）
    handleSearch(keyword) {
      uni.showToast({
        title: `搜索：${keyword}`,
        icon: "none",
        duration: 1200
      });
    },

    // 评论数格式化（万级显示，极致友好）
    formatComments(comments) {
      if (typeof comments === "string") comments = parseFloat(comments);
      if (isNaN(comments)) return "0";
      return comments >= 10000 ? (comments / 10000).toFixed(1) + "万" : comments;
    }
  }
};
</script>

<style scoped>
/* ========== 全局极致样式 ========== */
.page-container {
  background: linear-gradient(180deg, #fafbff 0%, #f5f7ff 100%);
  min-height: 100vh;
  padding-bottom: 40rpx;
  position: relative;
  overflow-x: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
}

/* 页面背景纹理（顶级质感） */
.page-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(67, 97, 238, 0.03) 1px, transparent 1px);
  background-size: 20rpx 20rpx;
  pointer-events: none;
  z-index: 0;
}

/* ========== 顶部导航栏（极致渐变） ========== */
.top-nav {
  background: linear-gradient(90deg, #4361ee 0%, #3a0ca3 100%);
  padding: 32rpx 24rpx;
  border-radius: 0 0 36rpx 36rpx;
  box-shadow: 0 12rpx 36rpx rgba(67, 97, 238, 0.18);
  margin-bottom: 24rpx;
  position: relative;
  overflow: hidden;
}

.top-nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
}

.nav-title {
  font-size: 44rpx;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  letter-spacing: 3rpx;
  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
}

.nav-divider {
  width: 120rpx;
  height: 6rpx;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  margin: 16rpx auto 0;
  border-radius: 3rpx;
  opacity: 0.8;
}

/* ========== 泉州天气模块（极致融合） ========== */
.weather-container {
  background: #ffffff;
  border-radius: 28rpx;
  padding: 32rpx;
  margin: 0 24rpx 36rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 天气卡片渐变顶条 */
.weather-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8rpx;
  background: linear-gradient(90deg, #4cc9f0, #4361ee, #3a0ca3);
  background-size: 200% 100%;
  animation: gradientShift 3s ease infinite;
}

/* 天气卡片悬浮动效 */
.weather-container:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 15rpx 35rpx rgba(0, 0, 0, 0.07);
}

.weather-header {
  margin-bottom: 24rpx;
}

.weather-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 8rpx;
  background: linear-gradient(90deg, #1a202c, #2d3748);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.weather-subtitle {
  font-size: 22rpx;
  color: #718096;
  letter-spacing: 1rpx;
}

/* 天气加载状态 */
.loading {
  padding: 20rpx 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #666;
}

.loading-spinner {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #e5e5e5;
  border-top: 4rpx solid #4361ee;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 天气错误状态 */
.error {
  padding: 20rpx 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15rpx;
}

.error-icon {
  font-size: 60rpx;
  margin-bottom: 10rpx;
}

.error-text {
  font-size: 28rpx;
  color: #f56c6c;
}

.retry-btn {
  background: linear-gradient(90deg, #4361ee, #3a0ca3);
  color: white;
  font-size: 26rpx;
  padding: 10rpx 24rpx;
  border-radius: 20rpx;
  border: none;
  outline: none;
  box-shadow: 0 6rpx 12rpx rgba(67, 97, 238, 0.2);
  transition: all 0.3s ease;
}

.retry-btn:active {
  transform: scale(0.95);
  box-shadow: 0 4rpx 8rpx rgba(67, 97, 238, 0.15);
}

/* 天气数据展示 */
.weather-info {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.weather-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30rpx;
  margin-bottom: 10rpx;
}

.weather-icon {
  font-size: 100rpx;
}

.weather-temp {
  display: flex;
  align-items: baseline;
  gap: 12rpx;
}

.temp-max {
  font-size: 60rpx;
  font-weight: 700;
  color: #e53e3e;
}

.temp-divider {
  font-size: 30rpx;
  color: #718096;
}

.temp-min {
  font-size: 40rpx;
  font-weight: 600;
  color: #4361ee;
}

.weather-detail {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20rpx;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.detail-label {
  font-size: 22rpx;
  color: #718096;
}

.detail-value {
  font-size: 28rpx;
  font-weight: 500;
  color: #2d3748;
}

/* ========== 新闻列表模块（顶级质感） ========== */
.news-section {
  position: relative;
  z-index: 1;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 0 24rpx;
}

/* 新闻卡片 */
.news-card {
  background: #ffffff;
  border-radius: 28rpx;
  padding: 32rpx;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.04);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transform: translateZ(0);
  border: 1rpx solid rgba(255, 255, 255, 0.8);
}

/* 置顶卡片特殊样式 */
.news-card--top {
  border: 1rpx solid rgba(229, 62, 62, 0.1);
}

/* 卡片渐变顶条 */
.news-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8rpx;
  background: linear-gradient(90deg, #4361ee, #4895ef, #3f37c9);
  background-size: 200% 100%;
  animation: gradientShift 3s ease infinite;
}

.news-card--top::before {
  background: linear-gradient(90deg, #e53e3e, #f97316, #e53e3e);
  background-size: 200% 100%;
  animation: gradientShift 2s ease infinite;
}

/* 卡片悬浮终极效果 */
.news-card:hover {
  transform: translateY(-8rpx) scale(1.005);
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.07);
}

/* 卡片纹理叠加 */
.card-texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(0, 0, 0, 0.01) 1px, transparent 1px);
  background-size: 30rpx 30rpx;
  pointer-events: none;
  opacity: 0.7;
}

/* 标题容器 */
.title-container {
  display: flex;
  align-items: flex-start;
  gap: 14rpx;
  margin-bottom: 24rpx;
  position: relative;
}

/* 置顶标签 */
.top-tag {
  background: linear-gradient(90deg, #e53e3e, #c53030);
  color: #ffffff;
  font-size: 20rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 500;
  box-shadow: 0 6rpx 12rpx rgba(229, 62, 62, 0.25);
  margin-top: 6rpx;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6rpx;
  transform: translateZ(0);
  transition: all 0.3s ease;
}

.news-card:hover .top-tag {
  transform: scale(1.05);
  box-shadow: 0 8rpx 16rpx rgba(229, 62, 62, 0.3);
}

.tag-icon {
  font-size: 22rpx;
}

/* 新闻标题 */
.news-card__title {
  font-size: 34rpx;
  font-weight: 600;
  color: #1a202c;
  line-height: 1.6;
  transition: all 0.4s ease;
  cursor: pointer;
  flex: 1;
  background: linear-gradient(90deg, #1a202c, #2d3748);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.02);
}

.news-card:hover .news-card__title {
  background: linear-gradient(90deg, #4361ee, #3a0ca3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 元信息区域 */
.news-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 22rpx;
  color: #718096;
  margin-bottom: 20rpx;
  gap: 16rpx;
}

.meta__left {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex-wrap: wrap;
}

.meta__author {
  color: #4a5568;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 4rpx 8rpx;
  border-radius: 12rpx;
}

.meta__author:hover {
  color: #4361ee;
  background-color: rgba(67, 97, 238, 0.05);
}

.meta__separator {
  width: 4rpx;
  height: 4rpx;
  background-color: #cbd5e0;
  border-radius: 50%;
}

.meta__comments,
.meta__time {
  display: flex;
  align-items: center;
  gap: 8rpx;
  transition: color 0.3s ease;
}

.news-card:hover .meta__comments,
.news-card:hover .meta__time {
  color: #4a5568;
}

.meta-icon {
  font-size: 20rpx;
  opacity: 0.8;
}

/* 搜索插槽 */
.search-slot {
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f5f6ff 0%, #edf2ff 100%);
  padding: 8rpx 18rpx;
  border-radius: 22rpx;
  border-left: 5rpx solid #4361ee;
  box-shadow: 0 4rpx 12rpx rgba(67, 97, 238, 0.08);
  transition: all 0.3s ease;
}

.news-card:hover .search-slot {
  background: linear-gradient(135deg, #f0f4ff 0%, #e6edff 100%);
  box-shadow: 0 6rpx 16rpx rgba(67, 97, 238, 0.12);
}

.search-slot__label {
  font-size: 20rpx;
  color: #4a5568;
  margin-right: 12rpx;
  font-weight: 500;
  letter-spacing: 1rpx;
}

.search-slot__tags {
  display: flex;
  gap: 12rpx;
}

/* 搜索标签 */
.search-tag {
  padding: 6rpx 18rpx;
  background: linear-gradient(180deg, #ffffff, #f8f9fa);
  border: 1rpx solid #e0e7ff;
  border-radius: 20rpx;
  color: #4361ee;
  font-size: 20rpx;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: 0 4rpx 8rpx rgba(67, 97, 238, 0.06);
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.search-tag:hover {
  background: linear-gradient(180deg, #f0f4ff, #e6edff);
  border-color: #4361ee;
  transform: scale(1.08);
  box-shadow: 0 6rpx 12rpx rgba(67, 97, 238, 0.15);
}

.search-tag:active {
  transform: scale(0.96);
  box-shadow: 0 2rpx 6rpx rgba(67, 97, 238, 0.1);
}

.tag-icon--small {
  font-size: 18rpx;
}

/* 底部装饰 */
.page-footer {
  height: 20rpx;
  margin-top: 20rpx;
}

/* ========== 核心动画（极致流畅） ========== */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ========== 深色模式（极致适配） ========== */
@media (prefers-color-scheme: dark) {
  .page-container {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
  }

  .page-container::before {
    background-image: radial-gradient(rgba(105, 177, 255, 0.05) 1px, transparent 1px);
  }

  .top-nav {
    background: linear-gradient(90deg, #16213e 0%, #0f3460 100%);
    box-shadow: 0 12rpx 36rpx rgba(0, 0, 0, 0.3);
  }

  /* 天气模块深色模式 */
  .weather-container {
    background: #1e293b;
    border: 1rpx solid rgba(75, 85, 99, 0.3);
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
  }

  .weather-title {
    background: linear-gradient(90deg, #f8fafc, #e2e8f0);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .weather-subtitle {
    color: #94a3b8;
  }

  .detail-label {
    color: #94a3b8;
  }

  .detail-value {
    color: #cbd5e1;
  }

  .loading-text {
    color: #94a3b8;
  }

  .loading-spinner {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: #60a5fa;
  }

  .error-text {
    color: #fca5a5;
  }

  .retry-btn {
    background: linear-gradient(90deg, #1e40af, #3b82f6);
  }

  /* 新闻模块深色模式 */
  .news-card {
    background: #1e293b;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
    border: 1rpx solid rgba(75, 85, 99, 0.3);
  }

  .news-card--top {
    border: 1rpx solid rgba(229, 62, 62, 0.2);
  }

  .news-card:hover {
    box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.25);
  }

  .card-texture {
    background-image: radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  }

  .news-card__title {
    background: linear-gradient(90deg, #f8fafc, #e2e8f0);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .news-card:hover .news-card__title {
    background: linear-gradient(90deg, #94a3b8, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
  }

  .news-card__meta,
  .meta__time {
    color: #94a3b8;
  }

  .meta__author {
    color: #cbd5e1;
  }

  .meta__author:hover {
    color: #60a5fa;
    background-color: rgba(96, 165, 250, 0.1);
  }

  .meta__separator {
    background-color: #475569;
  }

  .news-card:hover .meta__comments,
  .news-card:hover .meta__time {
    color: #cbd5e1;
  }

  .search-slot {
    background: linear-gradient(135deg, #27374d 0%, #334155 100%);
    border-left-color: #60a5fa;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  }

  .news-card:hover .search-slot {
    background: linear-gradient(135deg, #2d3748 0%, #34495e 100%);
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15);
  }

  .search-slot__label {
    color: #e2e8f0;
  }

  .search-tag {
    background: linear-gradient(180deg, #334155 0%, #27374d 100%);
    border-color: #475569;
    color: #60a5fa;
    box-shadow: none;
  }

  .search-tag:hover {
    background: linear-gradient(180deg, #34495e 0%, #2d3748 100%);
    border-color: #60a5fa;
    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.15);
  }
}

/* ========== 响应式适配（全尺寸兼容） ========== */
/* 小屏手机 */
@media (max-width: 375px) {
  .top-nav {
    padding: 24rpx 16rpx;
  }

  .nav-title {
    font-size: 38rpx;
  }

  .weather-container {
    padding: 24rpx;
    margin: 0 16rpx 24rpx;
  }

  .weather-title {
    font-size: 32rpx;
  }

  .weather-icon {
    font-size: 80rpx;
  }

  .temp-max {
    font-size: 50rpx;
  }

  .temp-min {
    font-size: 34rpx;
  }

  .news-card {
    padding: 24rpx;
  }

  .news-card__title {
    font-size: 30rpx;
  }

  .news-card__meta {
    font-size: 20rpx;
  }

  .search-tag {
    padding: 4rpx 14rpx;
    font-size: 18rpx;
  }
}

/* 平板/大屏 */
@media (min-width: 768px) {
  .page-container {
    max-width: 800rpx;
    margin: 0 auto;
    padding: 0 40rpx 40rpx;
  }

  .weather-detail {
    gap: 40rpx;
  }

  .news-list {
    gap: 30rpx;
  }
}
</style>